import React, { useState } from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

export default function JiFen() {
    const navigate = useNavigate()
    const [idx, setidx] = useState(1)
    const [arr, setarr] = useState([
        { id: 1, name: '猜灯谜', time: '2024-09-25 12:09:23', jifen: '+1',idx:1 },
        { id: 2, name: '非遗知识问答', time: '2024-09-25 12:09:23', jifen: '+4',idx:1 },
        { id: 3, name: '本草纲目', time: '2024-09-22 15:23:15', jifen: '+1',idx:1 },
        { id: 4, name: '积分过期', time: '2024-09-20 18:12:10', jifen: '-800',idx:1 },
        { id: 5, name: '本草纲目', time: '2024-09-19 12:13:15', jifen: '+4',idx:1 },
        { id: 6, name: '兑换消耗', time: '2024-09-19 10:13:15', jifen: '-588',idx:1 },
    ])
    const [arr1,setarr1]=useState([
        { id: 1, name: '猜灯谜', time: '2024-09-25 12:09:23', jifen: '+1',idx:2 },
        { id: 2, name: '非遗知识问答', time: '2024-09-25 12:09:23', jifen: '+4',idx:2 },
        { id: 3, name: '本草纲目', time: '2024-09-22 15:23:15', jifen: '+1',idx:2 },
        { id: 5, name: '本草纲目', time: '2024-09-19 12:13:15', jifen: '+4',idx:2 },
    ])
    const [arr2,setarr2]=useState([
        { id: 1, name: '积分过期', time: '2024-09-20 18:12:10', jifen: '-800',idx:3 },
        { id: 2, name: '兑换消耗', time: '2024-09-19 10:13:15', jifen: '-588',idx:3 },
    ])
    const back = () => {
        navigate('/app/my')
    }
    return (
        <div>
            <NavBar onBack={back}>
                <h3>积分记录</h3>
            </NavBar>
            <hr />
            <div style={{ width: '350px', height: '130px', background: 'linear-gradient(to right, rgb(237, 195, 145),rgb(244, 171, 87))', borderRadius: '15px', position: 'absolute', top: '80px', left: '40px' }}>
                <p style={{ position: 'absolute', left: '100px', top: '60px', fontSize: '17px' }}>我的积分</p>
                <p style={{ position: 'absolute', right: '20px', top: '10px', fontSize: '17px' }}>积分规则</p>
                <p style={{ position: 'absolute', right: '70px', top: '60px', fontSize: '22px' }}>56</p>
            </div>
            <div>
                <img style={{ position: 'absolute', left: '10px', marginTop: '20px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E7%A7%AF%E5%88%86%E8%AE%B0%E5%BD%95/u3574.svg' />
                <img style={{ position: 'absolute', left: '20px', marginTop: '30px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E7%A7%AF%E5%88%86%E8%AE%B0%E5%BD%95/u3578.svg' />
                <img style={{ position: 'absolute', left: '40px', marginTop: '45px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E7%A7%AF%E5%88%86%E8%AE%B0%E5%BD%95/u3579.svg' />
            </div>
            <ul style={{ listStyleType: 'none', width: '100%', display: 'flex', position: 'absolute', top: '250px', justifyContent: 'space-around' }}>
                <li onClick={() => { setidx(1) }} style={{ fontSize: '18px', width: '50px', textAlign: 'center', borderBottom: idx == 1 ? '1px solid red' : 'none' }}>全部</li>
                <li onClick={() => { setidx(2) }} style={{ fontSize: '18px', width: '50px', textAlign: 'center', borderBottom: idx == 2 ? '1px solid red' : 'none' }}>获得</li>
                <li onClick={() => { setidx(3) }} style={{ fontSize: '18px', width: '50px', textAlign: 'center', borderBottom: idx == 3 ? '1px solid red' : 'none' }}>消耗</li>
            </ul>
            <div style={{ width: '100%', height: '10px', backgroundColor: '#eee', position: 'absolute', top: '285px' }}></div>
            <div style={{ width: '100%', height: '300px', position: 'absolute', top: '294px' }}>
                {arr.filter(item=>item.idx == idx).map(item => {
                    return <div key={item.id} style={{ width: '100%', height: '80px', borderBottom: '1px solid #eee' }}>
                        <p style={{ fontSize: '17px', marginLeft: '15px', marginTop: '20px' }}>{item.name}</p>
                        <p style={{ fontSize: '17px', marginLeft: '15px', marginTop: '20px' }}>{item.time}</p>
                        <p style={{ fontSize: '17px',position:'relative',top:'-40px',right:'-370px' }}>{item.jifen}</p>
                    </div>
                })}
            </div>
            <div style={{ width: '100%', height: '300px', position: 'absolute', top: '294px' }}>
                {arr1.filter(item=>item.idx == idx).map(item => {
                    return <div key={item.id} style={{ width: '100%', height: '80px', borderBottom: '1px solid #eee' }}>
                        <p style={{ fontSize: '17px', marginLeft: '15px', marginTop: '20px' }}>{item.name}</p>
                        <p style={{ fontSize: '17px', marginLeft: '15px', marginTop: '20px' }}>{item.time}</p>
                        <p style={{ fontSize: '17px',position:'relative',top:'-40px',right:'-370px' }}>{item.jifen}</p>
                    </div>
                })}
            </div>
            <div style={{ width: '100%', height: '300px', position: 'absolute', top: '294px' }}>
                {arr2.filter(item=>item.idx == idx).map(item => {
                    return <div key={item.id} style={{ width: '100%', height: '80px', borderBottom: '1px solid #eee' }}>
                        <p style={{ fontSize: '17px', marginLeft: '15px', marginTop: '20px' }}>{item.name}</p>
                        <p style={{ fontSize: '17px', marginLeft: '15px', marginTop: '20px' }}>{item.time}</p>
                        <p style={{ fontSize: '17px',position:'relative',top:'-40px',right:'-370px' }}>{item.jifen}</p>
                    </div>
                })}
            </div>
        </div>
    )
}